<template>
  <view class="family">
    <view class="family-bg-red"></view>
    <view class="family-content">
      <!-- <view class="family-line"></view> -->
      <scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="familyScrollLeft">
        <view class="f-inner">
          <view
            v-for="(item, index) in familyList"
            :key="index"
            :class="['f-item', familyIndex === index ? 'active' : '']"
            @click="changePerson(index, item.relation, item.memberId)"
          >
            <view
              :class="[
                'f-logo',
                item.relation === 1 ? 'f-logo-self' : '',
                index % 2 === 0 ? 'f-b-imgw-boy' : 'f-b-imgw-girl'
              ]"
            >
              <image :src="item.src" :title="item.memberName" class="f-logo-img" />
            </view>
            <view :class="['f-name', familyIndex === index ? 'active' : '']">{{ item.memberName }}</view>
            <!-- <view v-if="familyIndex === index" class="f-san"></view> -->
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- <view class="family-bg-white"></view> -->
  </view>
</template>

<script>
import { getFamilyData } from '@/api/service.js';
export default {
  data() {
    return {
      patientId: '',
      userInfo: {},
      familyList: [],
      familyIndex: 0
    };
  },
  onLoad(option) {},
  created() {
    this.patientId = this.$store.state.join.patientid;
    try {
      this.userInfo = JSON.parse(wx.getStorageSync('rawData'));
    } catch (e) {
      console.log('e:', e);
    }
    this.getFamilyList();
  },
  methods: {
    changePerson(index, relation, memberId) {
      this.familyIndex = index;
      this.$emit('changePerson', index, relation, memberId);
    },
    getFamilyList() {
      let patientId = this.patientId;
      getFamilyData(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取用户关系列表失败' });
          return;
        }
        const newUserInfo = [
          {
            relation: 1,
            patientId: patientId,
            insuredId: patientId,
            memberId: patientId,
            sex: null,
            status: null
          }
        ];
        let resDataOrigin = res.data.length > 0 ? res.data : newUserInfo;
        // 对家庭组进行排序，本人、父母、配偶、子女
        let familySort = [1, 3, 2, 4];
        let resData = [];
        let resObj = {};
        resDataOrigin.forEach((fData) => {
          let relation = fData.relation;
          if (resObj[relation]) {
            resObj[relation].push(fData);
          } else {
            resObj[relation] = [fData];
          }
        });
        familySort.forEach((fIndex) => {
          if (resObj[fIndex]) {
            resData = resData.concat(resObj[fIndex]);
          }
        });

        resData.forEach((item) => {
          item.insuredId = item.memberId;
          item.insuredName = item.memberName;
          // sex 1男  0为女
          if (item.sex === 1) {
            // 只有父母和子女需要区分性别
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/father.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/son.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png';
            }
          } else {
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/mother.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/der.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/woman.png';
            }
          }
          // 如果是本人的话，则使用微信头像
          if (item.relation === 1) {
            item.src = this.userInfo.avatarUrl || item.src;
          }
        });

        this.familyList = resData;
        // 添加全家
        this.familyList.unshift({
          src:
            'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/icon/quanjia.png',
          memberName: '全家'
        });
        this.$emit('getFamilyList', this.familyList);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.family {
  width: 700rpx;
  background: #fff;
  margin: auto;
  margin-top: 20rpx;
  // border-radius: 24rpx;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;

  position: relative;
  padding-top: 10rpx; // 为了是让  family-content的圆角显示完整，要不然会有被切掉的感觉
  z-index: 0;

  .family-bg-red {
    overflow-x: scroll;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90rpx;
  }
  .family-content {
    // border-radius: 24rpx;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    padding: 32rpx 24rpx 0rpx;
    margin: auto;
    z-index: 100;
    position: relative;
    box-sizing: border-box;
    height: 218rpx;
    overflow-y: hidden;
    ::-webkit-scrollbar {
      width: 0 !important;
    }
    .family-line {
      width: 100%;
      height: 1rpx;
      background: #f60;
      position: absolute;
      left: 0;
      bottom: 0rpx;
    }
  }
  // .family-bg-white {
  //   height: 20rpx;
  //   position: relative;
  //   z-index: 100;
  //   background: white;
  //   width: 100%;
  //   display: none;
  // }
  .scroll-view_H {
    height: 220rpx;
    // overflow: visible;
  }
  .f-inner {
    display: flex;
    align-items: baseline;
    width: max-content;
    padding-right: 80rpx;
    width: 100%;
    height: 188rpx;
    $inActiveWidth: 96rpx;
    $activeWidth: 120rpx;

    .f-item {
      width: $inActiveWidth;
      height: inherit;
      margin-right: 44rpx;
      position: relative;
      &.active {
        width: $activeWidth;

        .f-logo {
          width: $activeWidth;
          height: $activeWidth;
          border-radius: $activeWidth;
          border: 6rpx solid #f60 !important;
        }
      }
      .f-logo {
        width: $inActiveWidth;
        height: $inActiveWidth;
        background: white;
        border-radius: $inActiveWidth;
        padding: 0rpx;
        box-sizing: border-box;
        overflow: visible;
        position: relative;
        background: #e3524b;
        // &.f-logo0 {
        //   background: none;
        //   border-radius: 16rpx;
        //   padding: 0;
        // }
        &.f-logo-self {
          border: 1px solid #e9f8ff;
        }
        &.f-b-imgw-boy {
          background: #e9f8ff;
        }
        &.f-b-imgw-girl {
          background: #ffefef;
        }
        .f-logo-img {
          width: 100%;
          height: 100%;
          border-radius: inherit;
        }
        .f-logo-img-icon {
          position: absolute;
          width: 80rpx;
          height: 32rpx;
          left: 50%;
          transform: translateX(-50%);
          bottom: -16rpx;
        }
      }
      .f-name {
        width: 100%;
        text-align: center;
        margin-top: 10rpx;
        font-size: 28rpx;
        height: 36rpx;
        line-height: 36rpx;
        border-radius: 36rpx;
        color: black;
        word-break: keep-all;
        overflow: hidden;
        &.active {
          background: #f60;
          color: white;
          font-weight: bold;
        }
      }
      .f-san {
        position: absolute;
        left: 50%;
        width: 0rpx;
        height: 0rpx;
        width: 18rpx;
        height: 18rpx;
        outline: 2rpx solid #f60;
        transform: rotate(45deg) translateX(-50%);
        background: white;
        bottom: -14rpx;
      }
      .f-w-line {
        position: absolute;
        width: 8rpx;
        height: 10rpx;
        left: 50%;
        transform: translateX(-50%);
        background: white;
        bottom: -7rpx;
      }
    }
    .f-add {
      width: 96rpx;
      height: 130rpx;
      margin-right: 40rpx;
      .f-a-btn {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        text-align: center;
        width: 96rpx;
        height: 96rpx;
        line-height: 96rpx;
        color: white;
        font-size: 72rpx;
        position: relative;
        border-radius: 96rpx;
        image {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 64rpx;
          height: 64rpx;
          transform: translate(-50%, -50%);
        }
      }
      .f-name {
        text-align: center;
        width: 100%;
        margin-top: 20rpx;
        color: rgba(255, 255, 255, 0.6);
        word-break: keep-all;
        overflow: hidden;
      }
    }
  }
  .p-user {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: auto;
    display: flex;
    align-items: center;
    border-top: 1px solid #e8e8e8;
    margin-top: -2rpx;
    .p-u-logo {
      width: 40rpx;
      height: 40rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .p-u-name {
      margin-left: 12rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.55);
    }
    .p-u-line {
      margin: 0px 24rpx;
      border-left: 1rpx solid #e8e8e8;
      width: 0;
      height: 32rpx;
      line-height: 32rpx;
    }

    .p-u-goods {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.55);
    }
  }
}
</style>
